<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="generator" content="Studio 3 http://aptana.com/">
		<meta name="author" content="Gavin Koh">
		<!-- Date: 2011-08-04 -->
		        <title>Cytoscape Web example</title>
        
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="js/cytoscape_web/json2.min.js"></script>
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="js/cytoscape_web/AC_OETags.min.js"></script>
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="js/cytoscape_web/cytoscapeweb.min.js"></script>
        <script type="text/javascript">
            window.onload=function() {
                // id of Cytoscape Web container div
                var div_id = "cytoscapeweb";
                
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
                var networ_json = {
                    data: {
                        nodes: [ { id: "1" }, { id: "2" } ],
                        edges: [ { id: "2to1", target: "1", source: "2" } ]
                    }
                };
                
                // initialization options
                var options = {
                    // where you have the Cytoscape Web SWF
                    swfPath: "swf/CytoscapeWeb",
                    // where you have the Flash installer SWF
                    flashInstallerPath: "swf/playerProductInstall"
                };
                
                // init and draw
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
                vis.draw({ network: networ_json });
            };
        </script>
        
        <style>
            /* The Cytoscape Web container must have its dimensions set. */
            html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
            #cytoscapeweb { width: 50%; height: 50%; border: 1px solid #000000; }
        </style>
	</head>
	<body>
		<h1>A Cytoscape Web Example</h1>
		<p>This version has only a graph with two nodes.</p>
	    <div id="cytoscapeweb">
            You need to enable Flash to see this.
        </div>
	</body>
</html>
